<template>
  <div class="my-addchild">
    <top-bar-detail :headline="headline" :hideShare="false" jump="/mychild">
      <div slot="rt" class="rt" @click="subminInfo">提交</div>
    </top-bar-detail>
    <div class="container pt">
      <div class="input-wrap">
        <div class="item clearfix">        
          <div class="label">姓名</div>
          <div class="ipt">
          <input type="text" v-model="childName" autocomplete="off" placeholder="请输入姓名">
          </div>
        </div>
        <div class="item clearfix">        
          <div class="label">性别</div>
          <div class="ipt">
            <div class="clearfix">
            <el-select class="line" v-model="genderType" popper-class="auto" placeholder="请选择">
              <el-option label="男" value="M" ></el-option>
              <el-option label="女" value="F" ></el-option>
            </el-select>
            </div>
          </div>
        </div>
        <div class="item clearfix">        
          <div class="label">生日</div>
          <div class="ipt">
            <input type="text" readonly="true" :value="birthday.split(' ')[0]" autocomplete="off" placeholder="请选择生日" @click="selectTimes">
          </div>
        </div>
        <div class="item clearfix">        
          <div class="label">我是</div>
          <div class="ipt">
            <div class="clearfix">
            <el-select class="line" v-model="kinship" popper-class="auto" placeholder="请选择">
              <el-option label="爸爸" value="爸爸" ></el-option>
              <el-option label="妈妈" value="妈妈" ></el-option>
              <el-option label="爷爷" value="爷爷" ></el-option>
              <el-option label="奶奶" value="奶奶" ></el-option>
              <el-option label="其他" value="其他" ></el-option>
            </el-select>
            </div>
          </div>
        </div>
      </div>
      <div class="file-upload clearfix">
        <div class="file-list">
          <img class="item" :src="avatar|defaultImg" alt=""/>
        </div>
        <div class="upload-btn">
          <file-upload target="/browser/api/common/file" action="POST" v-on:finish="finishUpload">
            <div class="empty"></div>
          </file-upload>
        </div>
      </div>
    </div>
    <select-date v-model="birthday" minDate="1960" :number="150" ref="times"></select-date>
  </div>
</template>

<script>
  import topBarDetail from '../../components/topbarDetail'
  import {setChildren} from '../../router/api'
//   import fileUpload from '../../components/fileUpload'
//   import selectDate from '../../components/selectDate'
  export default {
    data() {
      return {
        headline: '添加学生',
        genderType: '',
        kinship: '',
        type: '',
        avatar:'',
        childName:'',
        birthday: ''
      }
    },
    filters: {
      defaultImg(img){
        return img || 'http://img.mimiedu.com/default/headPic.png'
      }
    },
    mounted() {
      
    },
    methods: {
      selectTimes(){
        this.$refs.times.showDate();
      },
      //跳到学生详情
      jumpInfo(val){
        this.$router.push('/add/'+ val)
      },
      //添加学生
      addChild(){
        this.$router.push('/add/addChild/')
      },
      finishUpload (url) {
        this.avatar = url;
      },
      //提交
      subminInfo(){
        let childName = this.childName;
        let genderType = this.genderType;
        let birthday = this.birthday;
        let kinship = this.kinship;
        let avatar = this.avatar;

        let tipinfo = ''

        if(!childName){
          tipinfo = '请输入姓名';
        }else if(!genderType){
          tipinfo = '请选择性别';
        }else if(!birthday){
          tipinfo = '请输入生日';
        }else if(!kinship){
          tipinfo = '请选择与学生的关系';
        }

        if(!childName || !genderType || !birthday || !kinship){
          this.$message({
            message: tipinfo, 
            iconClass: 'icon-hide',
            duration: 1000,
          });
          return '';
        }
        
        if(childName && genderType && birthday && kinship){
          setChildren(childName,kinship,genderType,birthday,avatar).then(d => {
            if(d.code == 200){
              this.$message({
                message: '添加成功', 
                iconClass: 'icon-hide',
                duration: 1000,
                onClose: ()=>{
                  //更新state中的用户信息
                  this.$store.dispatch('getMyPreofile');
                  this.$router.push('/add/');
                }
              });
            }else{
              this.$message({
                message: d.message, 
                iconClass: 'icon-hide',
                duration: 1000,
              });
            }
          })
        }
      }
    },
    // components: {topBarDetail,fileUpload,selectDate}
  }
</script>

<style lang="less">
  .my-addchild{
    .container{background-color:#fafafa;}
    .input-wrap{
      margin-top:.48rem; background-color:#fff;
      .item{width:100%; padding:0 .72rem;  line-height:2rem; font-size:.72rem; border-bottom:1px solid #f1f1f1; }
      .label{ width:2.5rem;float:left;}
      .ipt{padding-left:2.5rem; text-align:right;
        .line{width:5rem;float:right;
          input{padding-right: .48rem;}
        }
      }
      input{ width:100%; height:2rem; line-height:2rem; border:none; font-size:.72rem; background-color:transparent; padding:0;text-align:right;}
    }
    .file-upload{position:relative;width:4.7619rem;height:4.7619rem;margin:.72rem auto;
      .file-list{width:4.7619rem;height:4.7619rem;}
      .item{width:100%;height:100%;border-radius:50%;}
      .upload-btn{position:absolute;top:50%;left:50%;margin:-0.756rem 0 0 -0.556rem;}
      .text{text-align:center;font-size:.72rem;}
      .empty{width:4.7619rem;height:4.7619rem;}
    }
  }
</style>